<template>
  <div id="echartsView">
    <div class="chartsBg">
      <div class="pieBg">
        <head-title title="知识产权" class="pieTitle" :bg-numb="4"/>
        <div class="canvasPie" ref="pieShow"></div>
      </div>
      <div class="lineBg">
        <head-title title="平台业务量" class="lineTitle" :bg-numb="5"/>
        <div class="canvasMonth" ref="month"></div>
        <div class="button-handle">
          <button :class="dataSum === 1 && 'active'" @click="dataSum = 1">业务数据</button>
          <button :class="dataSum === 2 && 'active'" @click="dataSum = 2">放款金额</button>
        </div>
      </div>
    </div>
    <div class="mapView">
      <head-title title="成都节点" class="mapTitle" :bg-numb="6"/>
      <map-view class="onlyMap" />
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import HeadTitle from '../components/HeadTitle'
    import MapView from './map/mapView'
    export default {
      name: 'echartsView',
      data() {
        return {
          dataSum: 1,
          timer: null
        }
      },
      components: {
        HeadTitle,
        MapView
      },
      methods: {
        addDate(date, times) {
          var addDate = new Date(date);
          var addArr = times.split('*');
          var addTime = parseInt(addArr[0]);
          var addType = addArr[1];
          switch (addType) {
            case 'Y':
              addDate.setFullYear(addDate.getFullYear() + addTime);
              return addDate;
            case 'M':
              addDate.setMonth(addDate.getMonth() + addTime);
              return addDate;
            case 'D':
              addDate.setDate(addDate.getDate() + addTime);
              return addDate;
            case 'H':
              addDate.setHours(addDate.getHours() + addTime);
              return addDate;
            case 'm':
              addDate.setMinutes(addDate.getMinutes() + addTime);
              return addDate;
            case 's':
              addDate.setSeconds(addDate.getSeconds() + addTime);
              return addDate;
            default:
              addDate.setTime(addDate.getTime() + addTime);
              return addDate;
          }
        },
        monthCanvas() {
          // // 根据当前日期，获取倒推14天的日期数组
          // let datesArr = []
          // var nowDate = new Date()
          // for(let i = 14; i >= 0; i --) {
          //   let changeDate = this.addDate(nowDate, '-'+ i + '*D')
          //   datesArr.push(changeDate.getDate())
          // }
          // //datesArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] // 仅做绘制测试使用，实际应用应注释
          //
          // this.myChart = this.$echarts.init(this.$refs.month);
          //
          // let arrY1 = [];
          // for (let i = 1; i <= datesArr.length; i++) {
          //   switch (i) {
          //     case 2: case 1: case 10: case 11: case 13: case 9: case 14: case 7:
          //       arrY1.push(2);
          //       break;
          //     case 4: case 5:
          //       arrY1.push(3);
          //       break;
          //     case 8: case 12: case 6: case 3:
          //       arrY1.push(4);
          //       break;
          //     default:
          //       arrY1.push(1);
          //       break
          //   }
          // }
          //
          // let arrY2 = [];
          // for (let i = 1; i <= datesArr.length; i++) {
          //   switch (i) {
          //     case 14: case 7: case 2: case 11: case 13: case 9:
          //       arrY2.push(1);
          //       break;
          //     case 8: case 1: case 10: case 5: case 4:
          //       arrY2.push(2);
          //       break;
          //     case 6: case 12: case 3:
          //       arrY2.push(3);
          //       break;
          //     default:
          //       arrY2.push(0);
          //       break
          //   }
          // }

          // 根据当前日期，获取倒推6个月
          let datesArr = []
          var nowDate = new Date()
          for(let i = 5; i >= 0; i --) {
            let changeDate = this.addDate(nowDate, '-'+ i + '*M')
            datesArr.push(changeDate.getMonth() + 1)
          }

          this.myChart = this.$echarts.init(this.$refs.month);

          let arrY1 = [];
          if (this.dataSum === 1) {
            for (let i = 0; i <= datesArr.length - 1; i++) {
              switch (i) {
                case 0:
                  arrY1.push(2);
                  break
                case 1:
                  arrY1.push(3);
                  break
                case 2:
                  arrY1.push(5);
                  break;
                case 3:
                  arrY1.push(4);
                  break
                case 4:
                  arrY1.push(5);
                  break;
                case 5:
                  arrY1.push(1);
                  break
              }
            }
          } else {
            for (let i = 0; i <= datesArr.length - 1; i++) {
              switch (i) {
                case 0:
                  arrY1.push(1000);
                  break
                case 1:
                  arrY1.push(2333);
                  break;
                case 2:
                  arrY1.push(5233);
                  break;
                case 3:
                  arrY1.push(233);
                  break
                case 4:
                  arrY1.push(4598);
                  break;
                case 5:
                  arrY1.push(1322);
                  break;
              }
            }
          }
          const option = {
            color: [
              "#21c7ff",
              "#3fe59e"
            ],
            grid: {
              x: '16%',
              right: '3%',
              top: '15%'
            },
            textStyle: {
              color: '#94e0fc',
              fontSize: '12px'
            },
            xAxis: {
              type: 'category',
              boundaryGap: false, // 从0刻度开始
              data: datesArr,
              // axisLabel: {
              //   interval: 0
              // },
              axisLine: {       //x轴
                show: true,
                lineStyle: {
                  color: '#23437e',
                  width: 1,
                }
              },
              axisTick: {
                show: false // 不显示刻度线
              },
              axisLabel: {
                formatter: function (val) {
                  return val + '月';
                }
              }
            },
            yAxis: {
              type: 'value',
              minInterval: 1, // 不显示小数
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              axisLine: {       //y轴
                show: true,
                lineStyle: {
                  color: '#23437e',
                  width: 1,
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#23437e',
                  width: 1,
                }
              }
            },
            series: [
              {
                name: '业务数量',
                data: arrY1,
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#143762" },
                      { offset: 0.5, color: "#0d3154" },
                      { offset: 1, color: "#0d334d" }
                    ])
                  }
                },
              }
            ]
          };


          //  绘制图表
          this.myChart.setOption(option);
        },
        change() {},
        pieCanvas() {
          this.myChart = this.$echarts.init(this.$refs.pieShow);
          const data = [
              {name: '发明专利', value: 15},
              // {name: '实用新型专利', value: 7},
              // {name: '外观设计专利', value: 36 },
              {name: '著作权', value: 32},
              {name: '商标权', value: 10}
          ]
          const option = {
            legend: {
              orient: 'vertical',
              icon: 'circle', // 可自定义图片icon:'image://./images/icon1.png'//格式为'image://+icon文件地址'
              x: 'right',
              y: 'center',
              left: '72%',
              top: '12%',
              itemWidth: 12,
              itemHeight: 12,
              align: 'left',
              textStyle: {
                fontSize: 13,
                rich: {
                  a: {
                    // width: 85,
                    lineHeight: 20,
                    fontSize: 13,
                    color: "#fff"
                  }
                }
              },

              data: data,
              formatter: [
                '{a|{name}}'
              ].join('\n')
            },
            series: [{
              type: 'pie',
              radius: ['35%', '55%'],
              center: ['40%', '45%'],
              color: ['#21c7ff', '#3fe59e', '#fb9e5f', '#da65e1', '#a859ff'],
              data: data,
              label: {
                normal: {
                  textStyle: {
                    fontSize: 14,
                    color:'#fff'
                  },
                  formatter: function (param) {
                    return Math.round(param.percent) + '%';
                    // return param.name + '\n' + Math.round(param.percent) + '%';
                  }
                }
              },
              labelLine: {
                normal: {
                  smooth: false,
                  lineStyle: {
                    width: 1,
                    color:'#fff'
                  }
                }
              }
            }]
          };
          this.myChart.setOption(option);
        }
      },
      watch: {
        dataSum() {
          this.monthCanvas()
        }
      },
      mounted() {
        this.monthCanvas()
        this.pieCanvas()

        this.timer = setInterval(() => {
           if (this.dataSum === 1) {
             this.dataSum = 2
           } else {
             this.dataSum = 1
           }
        }, 10 * 1000)
      },
      beforeDestroy() {
        this.timer && clearInterval(this.timer)
      }
    }
</script>

<style scoped lang="scss">
  #echartsView {
    background-image: url("../assets/img/bigScreenNew/echartsView.png");
    width: 909px;
    height: 714px;
    .chartsBg {
      height: 230px;
      .pieBg {
        width: 46%;
        position: relative;
        .pieTitle {
          position: absolute;
          left: 32px;
        }
        .canvasPie {
          position: absolute;
          width: 100%;
          top: 40px;
          height: 240px;
        }
      }
      .lineBg {
        width: 46%;
        position: relative;
        left: calc(48% + 5px);
        .lineTitle {
          position: absolute;
        }
        .canvasMonth {
          position: absolute;
          width: 100%;
          top: 40px;
          height: 240px;
        }
      }
    }
    .mapView {
      position: relative;
      height: calc(100% - 230px);
      padding: 0px 32px;
      .mapTitle {
        top: 5px;
        left: 32px;
      }
      .onlyMap {
        position: absolute;
        top: 40px;
        height: calc(100% - 40px - 20px);
        width: calc(100% - 64px);
      }
    }

    .button-handle {
      position: absolute;
      right: 15px;
      top: 42px;
      button {
        width: 78px;
        height: 23px;
        line-height: 23px;
        font-size: 13px;
        text-align: center;
        color: #3076c7;
        border: solid 1px #0d3d79;
        border-collapse:collapse;
        background-color: #0b122b;
        cursor: pointer;
        &.active {
          color: #87f0e4;
          background-color: #0f203f;
          border-color: #2c6bb5;
        }
      }
    }
  }
</style>
